<script setup lang="ts">
import useCountStore from '@/store/useCount';
import { ref, } from 'vue';
// let { sum } = toRefs(useCountStore());
let CountStore=useCountStore();
let n = ref(1);
function add()
{
// 第一种修改pinia的数据 适合修改只有一个数据，修改多个需要一个一个修改，调用多次
// sum.value+=n.value
// CountStore.sum+=n.value;
// CountStore.school='尚硅谷'
// 第二种 用$patch 适合多个数据修改成某个特定的值，不用计算
// CountStore.$patch({
//     sum:888,
//     school:"尚硅谷"
// })
// 第三种修改数据
CountStore.increment(n.value)
}
function minus()
{
    // CountStore.sum-=n.value;
    CountStore.decrement(n.value)
}
</script>
<template>
    <div class="count">
        <h2> 当前的求和为：{{ CountStore.sum }}</h2>
        <h2>放大十倍的数据：{{ CountStore.bigSum }}</h2>
        <select name="add" v-model="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add"
        >
            加法
        </button>
        <button @click="minus">减法</button>
    <h2>学校：{{ CountStore.school }}</h2>
    </div>
</template>

<style lang="css" scoped>
.count {
    width: 80%;
    height: 200px;
    background-color: rgb(119, 119, 255);
    border-radius: 12px;
    padding: 20px;
}
button{
    width: 80px;
    margin-left: 20px;
    height: 36px;
}
select{
    height: 36px;
}
</style>